<template>
  <a-card :bordered="false">
    <a-list :grid="{ gutter: 6, column: 4 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item, index" >
        <a-card hoverable bordered
                 style="background-color:#B0D5DF"
                :body-style='{padding:0}'
        >
          <img
            v-if="item.deviceType == 2"
            slot="cover"
            alt="输送线信息"
            src="~@assets/2.png"
            style="height: 180px;margin-top: 5px;margin-bottom: 5px"
            @click="goPage(item)"
          />
          <img
            v-else-if="item.deviceType == 0"
            slot="cover"
            alt="穿梭车信息"
            src="~@assets/11.png"
            style="height: 180px;margin-top: 5px;margin-bottom: 5px"
            @click="goPage(item)"
          />
          <img
            v-else-if="item.deviceType == 1"
            slot="cover"
            alt="读码器信息"
            src="~@assets/3.png"
            style="height: 180px;margin-top: 5px;margin-bottom: 5px"
            @click="goPage(item)"
          />
          <img
            v-else-if="item.deviceType == 3"
            slot="cover"
            alt="提升机信息"
            src="~@assets/5.png"
            style="height: 180px;margin-top: 5px;margin-bottom: 5px"
            @click="goPage(item)"
          />
          <template slot="actions" class="ant-card-actions">
          <a-badge status="processing" :text="item.deviceName"/>
          </template>
        </a-card>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>


import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import { getAction } from '@/api/manage';

export default {
  name: "TransLineMonitor",
  mixins: [JeecgListMixin],
  components: {
  },
  data() {
    return {
      data : [],
      // hstyle:{"font-size": "20px","color":"#666"},
      url: {
        list: "/wcs/wcsDeviceInfo/list",
      },
    };
  },
  methods:{
    goPage(item){
      if(item.deviceType == 2){
        this.$router.push({path:'/monitor/TranslineDetailInfo',query:{deviceId:item.id,deviceType:item.deviceType}})
      }else if(item.deviceType == 0){
        this.$router.push({path:'/monitor/FourWayCarDetailInfo',query:{deviceId:item.id,deviceType:item.deviceType}})
      }else if(item.deviceType == 3){
        this.$router.push({path:'/monitor/HoistDetailInfo',query:{deviceId:item.id,deviceType:item.deviceType}})
      }
    },
    loadData(){
      getAction(this.url.list,{status:1}).then((res) => {
        if (res.success) {
          this.data = res.result.records;
        }
      })
    },
  }
};
</script>
<style>
.ant-card-extra, .ant-card-head-title{
  font-size: 20px;
  font-weight: bolder;
}
</style>